import React, { useRef, ChangeEvent } from 'react';

interface FileSelectorProps {
  children: React.ReactNode;
  setFiles([]): void;
}

export const FileSelector: React.FC<FileSelectorProps> = ({ children, setFiles }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      const selectedFiles = Array.from(event.target.files);
      setFiles(selectedFiles);

      if (fileInputRef) {

        if (fileInputRef.current) {
          fileInputRef.current.value = '';
        }
      }
    }
  };

  const handleClickInput = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  return (
    <div>
      <div onClick={handleClickInput} className='min-w-max' >{children}</div>
      <input
        type="file"
        multiple
        ref={fileInputRef}
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />
    </div>
  );
};

